<template>
    <el-dialog title="余额明细" :visible="visible" @open="handleDialogOpen" @close="handleDialogClose">
        <el-table v-loading="loading" :data="withdrawRecords">
            <el-table-column prop="recordType" label="交易类型">
                <template slot-scope="scope">
                    {{ ['提现中', '交易收入', '待收入', '提现完成', '交易费', '手续费', '退款'][scope.row.recordType] }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="交易时间">
               <template slot-scope="scope">
                   {{ timestampToString(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="money" label="交易金额">
                <template slot-scope="scope">
                    {{displayMoney(scope.row.money, scope.row.recordType)}}
                </template>
            </el-table-column>
            <el-table-column prop="balance" label="操作后余额">
                <template slot-scope="scope">
                    {{ `￥${(scope.row.balance / 100).toFixed(2)}` }}
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10"
                layout="total, prev, pager, next" :total="total" class="pagination-order">
            </el-pagination>
        </div>
    </el-dialog>
</template>
<script>
import moment from "moment";
import { api } from "@/api/api.js";
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    openid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      withdrawRecords: [],
      currentPage: 1,
      loading: false,
      total: 0
    };
  },
  methods: {
    fetchBalanceDetailList() {
      const { openid, currentPage } = this;
      this.loading = true;
      this.http
        .post(api.balanceDetailList, {
          openid,
          page: currentPage,
          size: 10
        })
        .then(({ data }) => {
          this.withdrawRecords = data.data.list;
          this.total = data.data.total;
        })
        .finally(() => (this.loading = false));
    },
    handleDialogOpen() {
      this.fetchBalanceDetailList();
    },
    handleDialogClose() {
      this.currentPage = 1;
      this.$emit("close");
    },
    timestampToString(timestamp) {
      return moment(timestamp)
        .locale("zh-cn")
        .format("YYYY年MoDo HH:mm:ss");
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      console.log(page);
      this.fetchBalanceDetailList();
    },
    displayMoney(money, type) {
      const MoneyStatus = {
        IN_THE_PRESENT: 0,
        INCOME: 1,
        WAIT_FOR_INCOME: 2,
        PRESENT_COMPLETION: 3,
        TRANSACTION_COST: 4,
        SERVICE_CHARGE: 5,
        REFUND: 6
      };
    switch (type) {

      case MoneyStatus.PRESENT_COMPLETION:
      case MoneyStatus.TRANSACTION_COST:
      case MoneyStatus.SERVICE_CHARGE:
      case MoneyStatus.IN_THE_PRESENT:
      case MoneyStatus.REFUND:
        return `- ${money / 100}元`;

       case MoneyStatus.WAIT_FOR_INCOME:
       case MoneyStatus.INCOME:

        return `+ ${money / 100}元`

      default:
      return `${money / 100}元`;
    }
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
